<template>
    <div>
        <div class="bread_crumb">
            <bread-crumb></bread-crumb>
        </div>
        <div class="stu_info_wrap">
        <div class="stu_info">
            <h1>学生信息</h1>
            <el-form ref="form" :model="form" label-width="70px" >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学号"  prop="stu_id">
                            <el-input v-model.trim="form.stu_id" ></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="stu_name">
                            <el-input v-model.trim="form.stu_name" ></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="stu_sex">
                            <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                            <el-radio v-model="form.stu_sex" label="女">女</el-radio>
                        </el-form-item>
                        <el-form-item label="籍贯">
                            <el-cascader
                                v-model="value"
                                :options="options"
                                :props="{
                                    label:'name',
                                    value:'name',
                                }"
                                @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="出生日期" prop="stu_date">
                            <el-date-picker
                                v-model="form.stu_data"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="男女朋友" prop="stu_gbf">
                            <el-input v-model.trim="form.stu_gbf" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="头像" prop="stu_head_img">
                            <el-button @click="upLoad">点击上传图片</el-button>
                            <el-button @click="goCamera">拍照上传</el-button>
                            <input type="file" @change="getFile" ref="getInp" hidden name="" id="" />
                            <img width="120px" height="90px" :src="form.stu_head_img" alt="" />
                            <div>
                                <p>注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传</p>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="爱好及自我评价">
                    <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editor"
                        :defaultConfig="toolbarConfig"
                        :mode="mode"
                    />
                    <div class='Editwrap'>
                        <Editor
                        style="height: 500px; overflow-y: hidden;"
                        v-model="html"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="onCreated"
                        />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button type="primary" @click="goReset">重置</el-button>
                    <el-button type="primary" @click="$router.push({name:'TestResetComponent'})">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    </div>
</template>

<script>
/* 
级联选择器有了数据不对  从服务器进行请求 发送ajax  接口分类  分成对应的模块
stuInfo  (该模块当中都是学生信息相关的所有接口) 
create mounted


*/
import { req_area,req_stu_info} from '@/api/stuinfo';
import { result } from 'lodash';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
    export default{
        data(){
            return{
                form:{
                    stu_id:'',
                    stu_name:'',
                    stu_sex:'',
                    stu_jg:'',
                    stu_date:'',
                    stu_hobby:'',
                    stu_gbf:'',
                    stu_head_img:''
                },
                value: [],
                options:[],
                // 富文本编辑器的初始化工具
                editor: null,
                html: '<p></p>',
                toolbarConfig: { },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'default', // or 'simple'
                }
            },
        async mounted(){
            let result=await req_area();
            console.log(result);
            this.options=result.data;
            
            // 路由组件传值 一定注意是父子路由组件传值还是兄弟
            // 父子路由组件  我们可以通过watch监听去处理
            // 如果说是兄弟  每一次兄弟路由组件变换都是销毁与重建
            console.log(this.$route.query);
            this.form.stu_head_img=this.$route.query.imgSrc;
            console.log(this.form);
        },
        methods:{
            goCamera(){
                this.$router.push({
                    name:'CameraUpLogin'
                })
            },
            upLoad(){
                // 点击该按钮相当于点击input
                this.$refs.getInp.click();
            },
            getFile(){
                console.log('获取图片的函数');
                let that =this;
                //获取input files 获取文件的相关信息
                console.dir(this.$refs.getInp.files[0]);
                let f= this.$refs.getInp.files[0];
                let fr = new FileReader();
                fr.readAsDataURL(f);
                fr.onload = function(){
                    console.log(fr.result);
                    that.form.stu_head_img=fr.result;
                    // Cannot read properties of undefined (reading 'stu_head_img') at fr.onload 
                    // undefined.stu_head_img
                    // 报错的意思就是this.form 为 undefined   form一般不会写错  this
                    // this指向不对
                }
            },
            handleChange(value){
                console.log(value)
                // 得到的数据是数组  服务器要求stu_jg是字符串
                // 数组如何变成字符串
                this.form.stu_jg=value.join('-');
                // concat
                console.log(this.form.stu_jg);
            },
            async onSubmit(){
                /*
                getHtml 获取的是富文本编辑器当中的标签
                getText 获取的是富文本编辑器当中的文本
                */
                console.log('这是提交按钮');
                this.form.stu_hobby = this.editor.getText();
                console.log(this.form);
                // 首先收集到所有的学生相关信息数据
                // 提交给服务器 ajax
                let result = await req_stu_info(this.form);
                console.log(result);
                // 数据上传时要注意学号是唯一的不能重复
                this.$message({
                    message:'数据提交成功！！',
                    type:'success'
                    // 清空内容  清空的效果跟重置的一样
                })
            },
            goReset(){
                console.log('这是重置按钮');
                this.$refs.form.resetFields();
                // 清除籍贯
                this.value=[];
                // 清除富文本编辑器
                this.html="<p></p>";
                /*
                重置的方案：
                1.初始化数据清空
                2.element-ui 有一个form resetFileds
                3.让组件刷新  组件重新加载既刷新

                面试题：让组件强制刷新的方案  $forceUpdate v-if key
                v-if key 真正的组件刷新
                $forceUpdate 伪组件强制刷新


                */
            },
            // 富文本编辑器
            onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
        },
        // 销毁编辑器
        beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
        },
        components:{
            Editor,
            Toolbar,
        }
    }
</script>

<style lang="scss" scoped>
    div{
        .bread_crumb {
            height: 30px;
        }
            .stu_info_wrap{
            .stu_info{
                h1{
                    text-align: center;
                }
                .Editwrap{
                    height: 120px;
                    overflow: hidden;
                }
            }
        }
    }
</style>